<template>
  <div id="settlement-platform-page">
    <div class="page-title"  :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>入驻平台</span>
    </div>

    <div align="center" style="position: relative"
         :style="{
      top:(this.getSafeArea().top+5)+'px',
         }">
      <el-radio-group v-model="currType" size="medium">
        <el-radio-button label="0">商家</el-radio-button>
        <el-radio-button label="1">供应商</el-radio-button>
      </el-radio-group>
    </div>

    <div class="settlement-platform-form" style="position: relative;width: 95%; margin: 15px auto" :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <el-form ref="myForm" size="medium" :rules="rules" :model="form" label-width="85px">
        <el-form-item label="商家名称:" prop="name">
          <el-col :span="22">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="经验范围:" prop="classifyName">
          <el-col :span="22">
            <el-input v-model="form.classifyName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="所在地区:" prop="address">
          <el-col :span="18">
            <div v-text="getCityInfo()"></div>
          </el-col>
          <el-col :span="4">
            <span  @click="goToAMap()" class="el-icon el-icon-location" style="color: #888888; font-size: 22px">
            </span>
          </el-col>
          <el-col :span="22">
            <el-input type="textarea" v-if="form.county && form.county.length>0" placeholder="请填写 详细地址"
                      v-model="form.address"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话:" prop="mobile">
          <el-col :span="22">
            <el-input v-model="form.mobile"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="营业时间:" required>
          <el-col :span="22">
            <el-time-select
              v-model="form.startTime"
              :picker-options="{
                start: '05:30',
                step: '00:30',
                end: '23:30',
                maxTime: form.endTime
              }"
              placeholder="选择 开始时间">
            </el-time-select>
            <el-time-select
              style="margin-top: 10px"
              v-model="form.endTime"
              :picker-options="{
                start: '05:30',
                step: '00:30',
                end: '23:30',
                minTime: form.startTime
              }"
              placeholder="选择 结束时间">
            </el-time-select>
          </el-col>
        </el-form-item>
        <el-form-item label="验证码:" prop="imageVerifyCode">
          <el-col :span="10">

            <el-input v-model="form.imageVerifyCode"></el-input>
          </el-col>
          <el-col :span="12">
            <img class="verfiyImg" ref="verfiyImg" title="点击刷新"
                 :src="verifyImgSrc"
                 @click="reflshVerifyImg"
                 alt="">
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="submitForm">提交申请</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SubmitShopApply',
  data: function () {
    return {
      currType:'0',
      rules:{
        name: [
          { required: true, message: '请输入 商家名称', trigger: ['blur','change'] },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: ['blur','change'] }
        ],
        classifyName: [
          { required: true, message: '请输入 经验范围', trigger: ['blur','change'] },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: ['blur','change'] }
        ],

        address: [
          { required: true, message: '请输入 详细地址', trigger: ['blur','change'] },
          { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: ['blur','change'] }
        ],
        mobile: [
          { required: true, message: '请输入 联系电话', trigger: ['blur','change'] },
          { min: 7, max: 20, message: '长度在 7 到 20 个字符', trigger: ['blur','change'] }
        ],
        startTime: [
          { required: true, message: '请输入 开始时间', trigger: ['blur','change'] },
        ],
        endTime: [
          { required: true, message: '请输入 结束时间', trigger: ['blur','change'] },
        ],
        imageVerifyCode: [
          { required: true, message: '请输入 验证码', trigger: ['blur','change'] },
          { min: 4, max: 6, message: '验证码 格式错误', trigger: ['blur','change'] }
        ],
      },
      verifyImgSrc: this.ApiDoNameAuth + 'Verify/createImage?eventType=submitShopApply&deviceId='+this.GetDeviceID(),
      form: {
        name: '',
        classifyName: '',
        province: '',
        city: '',
        county: '',
        address: '',
        location: this.CurrUser.Location,
        mobile: '',
        startTime: '',
        endTime: '',
        imageVerifyCode:''
      }
    }
  },
  mounted () {
    if (this.$route.query.setMapData && this.$route.query.mapDataString){
      this.getMapData();
    }
  },
  methods: {
    // 刷新验证码
    reflshVerifyImg: function () {
      this.$refs.verfiyImg.src = this.verifyImgSrc + '&v=' + Math.random()
      this.form.imageVerifyCode = ''
    },
    // 跳转至高德地图
    goToAMap:function () {
      var queryParams={}
      if (this.form.location){
        queryParams.location=this.form.location
      }
      if (this.form.province){
        queryParams.province=this.form.province
        queryParams.city=this.form.city
        queryParams.county=this.form.county
      }
      if (this.form.address){
        queryParams.address=this.form.address
      }
      localStorage.setItem('MyAMapFromDataString',JSON.stringify({
        name:this.$route.name,
        query:this.$route.query?this.$route.query:{},
      }))
      this.$router.push({
        name:"MyAMap",
        query:queryParams
      })
    },
    // 获取地图回传数据
    getMapData:function () {
      var mapData=JSON.parse(decodeURI(this.$route.query.mapDataString))
      this.form.county=mapData.county
      this.form.city=mapData.city
      this.form.province=mapData.province
      this.form.location=mapData.location
      this.form.address=mapData.address
      this.$forceUpdate()
      console.log('mapData',mapData)
    },
    submitForm: function () {
      let $this=this
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          if ($this.form.location===''){
            return $this.successTip('所在位置定位 必须','error')
          }
          if (!$this.form.startTime || !$this.form.startTime){
            return $this.successTip('营业时间 必须','error')
          }
          var from={
            type:$this.currType,
            name:$this.form.name,
            classifyName:$this.form.classifyName,
            mobile:$this.form.mobile,
            province:$this.form.province,
            city:$this.form.city,
            county:$this.form.county,
            location:$this.form.location,
            address:$this.form.address,
            businessTime:$this.form.startTime+','+$this.form.endTime,
            imageVerifyCode:$this.form.imageVerifyCode,
          }
          $this.MyRequest($this.ApiDoNameShop+'Public/submitShopApply', from, function (data) {
            $this.form={
              name: '',
              classifyName: '',
              province: '',
              city: '',
              county: '',
              address: '',
              location: $this.CurrUser.Location,
              mobile: '',
              startTime: '',
              endTime: '',
              imageVerifyCode:''
            };
            $this.$refs.myForm.resetFields()
            $this.$refs.myForm.clearValidate()
            $this.successTip("提交成功!")
            $this.reflshVerifyImg()
          }, function (msg) {
            $this.reflshVerifyImg()
            $this.$message.error(msg)
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getCityInfo: function () {
      if (this.form.province && this.form.province.length > 0) {
        return this.form.province + ',' + this.form.city + ',' + this.form.county
      } else {
        return '-'
      }
    }
  }
}
</script>

<style scoped>

</style>
